<template>
	<view>
		<uv-navbar leftText="返回" title="诊所" @leftClick="backClick"></uv-navbar>
		
		<view class="change_clinic">
			<uv-swipe-action ref="closeClinicOtherRef">
				<view v-for="item, index in clinic_list" :key="index">
					<uv-swipe-action-item :options="item.options.option" :disabled="item.options.disabled" :index="item._id" :name="item._id" @click="clinicClick()">
						<view class="swipe-action uv-border-top uv-border-bottom">
							<view class="swipe-action__content">
								<view class="clinic_class">
									<text class="swipe-action__content__text">{{ item.clinic }}</text>
									<view style="text-align: right;">
										<uv-text v-if="item.options.disabled" text="保留" type="info"></uv-text>
										<uv-icon v-else name="arrow-right"></uv-icon>
									</view>
								</view>
							</view>
						</view>
					</uv-swipe-action-item>
					<uv-line></uv-line>
				</view>
			</uv-swipe-action>
		</view>
		<view v-if="clinic_list.length > 0" class="create_clinic_button">
			<uv-button :hairline="false" text="创建" color="#2c9c3c" customTextStyle="color: #ffffff;font-size: 28rpx" @click="createSubmit('999')"></uv-button>
		</view>
		<uv-modal ref="deleteModal" content='确定删除吗？' align="center" :showCancelButton="true" confirmColor="#2c9c3c" @confirm="confimSubmit"></uv-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo: {},
				clinic_list: []
			}
		},
		created() {
			this.userinfo = this.$store.state.userinfo
			this.get_clinic_data()
		},
		methods: {
			backClick() {
				uni.navigateBack()
			},
			get_clinic_data() {
				uni.showLoading()
				this.clinic_list = this.userinfo.clinic_data_all
				for (let i = 0; i < this.clinic_list.length; i++) {
					this.clinic_list[i].options = { disabled: this.clinic_list[i]._id === this.userinfo.clinic._id?true:false, option: [
						{ text: '修改', style: { backgroundColor: '#2c9c3c' } },
						{ text: '取消关联', style: { backgroundColor: '#f9ae3d' } }
					] }
					if ( this.userinfo.userId === this.clinic_list[i].userId ) {
						this.clinic_list[i].options.option.push({ text: '删除', style: { backgroundColor: '#f56c6c' }})
					}
				}
				setTimeout(function () { uni.hideLoading() }, 1000);
			},
			clinicClick(inx) {
				if (inx.index === 0) {
					this.createSubmit(inx.name)
				}
				if (inx.index === 1) {
					uni.showLoading()
					this.$api.cancel_relevance_clinic({ userId: this.userinfo.userId, types: this.userinfo.types, clinicId: inx.name }).then((res) => {
						for (let i = 0; i < this.userinfo.clinic_data_all.length; i++) {
							if ( inx.name === this.userinfo.clinic_data_all[i]._id ) {
								this.userinfo.clinic_data_all.splice(i, 1)
								this.userinfo.clinic_id_list.splice(i, 1)
								break
							}
						}
						this.$refs.closeClinicOtherRef.closeOther()
						this.$store.dispatch('set_userinfo', this.userinfo)
						uni.hideLoading()
					})
				}
				if (inx.index  === 2) {
					this.deleteClinicId = inx.name
					this.$refs.deleteModal.open()
				}
			},
			createSubmit(res) {
				uni.navigateTo({
					url:`/pages/settings/components/create_clinic/create_clinic?res=${res}`
				})
			},
			confimSubmit() {
				uni.showLoading()				
				this.$api.delete_clinic({ _id: this.deleteClinicId }).then((res) => {
					for (let i = 0; i < this.userinfo.clinic_data_all.length; i++) {
						if ( this.deleteClinicId === this.userinfo.clinic_data_all[i]._id ) {
							this.userinfo.clinic_data_all.splice(i, 1)
							this.userinfo.clinic_id_list.splice(i, 1)
							break
						}
					}
					this.$refs.closeClinicOtherRef.closeOther()
					this.$store.dispatch('set_userinfo', this.userinfo)
					uni.showToast({ title: '提交成功', icon:'success' })
				})
			}
		}
	}
</script>

<style lang="scss">
	.change_clinic {
		margin-top: 90px;
		
		.clinic_class {
			padding: 0rpx 30rpx 0rpx 0rpx;
			display: flex;	// 使用 flex 布局
			justify-content: space-between;	// 左右两个视图分散排列
		}
	}
		
	.create_clinic_button {
		padding: 30px;
	}
	
	.uv-page {
		padding: 0;
	}
	.uv-demo-block__title {
		padding: 10px 0 2px 15px;
	}
	.swipe-action {
		&__content {
			padding: 25rpx 0;
			&__text {
				font-size: 15px;
				color: #222;
				padding-left: 30rpx;
			}
		}
	}
</style>
